import React, { useRef, useState } from 'react';

import { Tooltip } from 'antd';

import type { TooltipProps } from 'antd/lib/tooltip';

/**
 * BeyondHidingProps 类型定义
 * @typedef {Object} BeyondHidingProps
 * @property {string} [className] - 自定义样式类
 * @property {React.CSSProperties} [style] - 样式
 * @property {React.ReactNode} title - 提示内容
 */
type BeyondHidingProps = Omit<TooltipProps, 'open' | 'trigger'> & {
  className?: string;
  style?: React.CSSProperties;
  title: React.ReactNode;
};

/**
 * BeyondHiding 组件
 * 用于在内容溢出时显示提示
 * @param {BeyondHidingProps} props - 组件属性
 * @returns {JSX.Element} - 渲染的组件
 */
const BeyondHiding = ({
  className,
  style,
  title,
  ...props
}: BeyondHidingProps): React.ReactElement => {
  const [isShow, setIsShow] = useState(false);

  // 引用 span 标签
  const contentRef = useRef<HTMLSpanElement>(null);

  /**
   * 判断是否显示提示
   * 计算 span 标签的 offsetWidth 与盒子元素的 offsetWidth，给 isShow 赋值
   */
  const isShowTooltip = (): void => {
    if (contentRef?.current?.parentElement) {
      const spanWidth = contentRef.current.offsetWidth;
      const parentWidth = contentRef.current.parentElement.offsetWidth;

      if (spanWidth > parentWidth) {
        setIsShow(true);
      }
    }
  };

  return (
    <Tooltip open={isShow} title={title} {...props}>
      <span
        className={className}
        ref={contentRef}
        style={style}
        onMouseLeave={() => setIsShow(false)}
        onMouseOver={isShowTooltip}
      >
        {title}
      </span>
    </Tooltip>
  );
};

// 示例用法
// <BeyondHiding title="示例文本" />
export default BeyondHiding;
